<!-- 
    Security Knowledge Framework is an expert system application 
    that uses OWASP Application Security Verification Standard, code examples,
    helps developers in pre-development and post-development.  
    Copyright (C) 2020  Glenn ten Cate, Riccardo ten Cate

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
<!--main content start-->

<section id="main-content" class="">
  <section class="intro">
    <div class="inner">
      <div class="text">
        <h1>All checklist types</h1>
        <p>An overview of all the current available checklists. More information about the checklist by clicking on a
          checklist name. </p>
      </div>
      <button *ngIf="category_id" style="float:right;" (click)="open(content); getSet('','','','')" class="btn btn-default"><i class="fa fa-cog"
          aria-hidden="true" id="add-new-checklist"></i> Add
        new checklist</button>
    </div>
    <div class="col-sm-4" style="float:right; margin-bottom:1%;">
			<select placeholder="Asdsad" class="form-control" [(ngModel)]="category_id" (change)="selectChecklistsFromCategory()" >
				<option selected [value]="selectUndefinedOptionValue">Select a category to work with!</option>
				<option *ngFor="let category of categories" value="{{category.id}}">{{category.name}}</option>
			</select>
		</div>
  </section>
  <section class="wrapper">
    <div class="row mt">
      <div class="col-lg-12">
        <div class="srcWrap">
          <div *ngIf="category_id" class="src">
            <input class="searchinput" [(ngModel)]="queryString" id="search" name="search"
              placeholder="Search checklist" />
            <i class="fa fa-search"></i>
          </div>
        </div>
        <div class="content-panel">
          <div *ngIf="isSubmitted && formControls.name.errors" class="help-block">
            <div *ngIf="formControls.name.errors.required">
              <ngb-alert type="danger" [dismissible]="false">
                Checklist type name was not filled in
              </ngb-alert>
            </div>
          </div>

          <div *ngIf="isSubmitted && formControls.description.errors" class="help-block">
            <div *ngIf="formControls.description.errors.required">
              <ngb-alert type="danger" [dismissible]="false">
               Checklist type description was not filled in
              </ngb-alert>
            </div>
          </div>

          <div *ngIf="isSubmitted && formControls.visibility.errors" class="help-block">
            <div *ngIf="formControls.visibility.errors.required">
              <ngb-alert type="danger" [dismissible]="false">
                  visibility was not selected
              </ngb-alert>
            </div>
          </div>

          <table *ngIf="category_id" class="table table-striped table-advance table-hover">
            <thead>
              <tr>
                <th><i class="fa fa-bullhorn"></i> Name</th>
                <th><i class="fa fa-times"></i> Checklist description</th>
                <th><i class="fa fa-check"></i> Active</th>
                <th><i class="fa fa-check"></i> Update</th>
                <th><i class="fa fa-times"></i> Delete</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let checklists of checklistTypes | stringFilter : queryString; let myIndex = index">
                <td style="color:#515594"><a [routerLink]="['/checklist-manage',checklists.id]"
                    class="btn btn-default btn-xs">{{checklists.title}}</a></td>
                <td>{{checklists.description}}</td>
                <td>{{checklists.visibility}}</td>
                <td>
                  <button id="update-checklist{{myIndex}}"
                    (click)="open(updateContent); getSet(checklists.title, checklists.description, checklists.visibility)"
                    class="btn btn-warning btn-xs">
                    <i class="fa fa-check "></i>
                  </button>
                </td>
                <td>
                  <button id="delete-checklist{{myIndex}}" (click)="open(deleteContent)" class="btn btn-danger btn-xs">
                    <i class="fa fa-times "></i>
                  </button>
                </td>
                <!-- Modal for deleting a new checklist type-->
                <ng-template #deleteContent let-c="close" let-d="dismiss">
                  <div class="modal-header">
                    <h4 class="modal-title">Delete checklist!</h4>
                    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>Are you sure you want to delete this checklist?</p>
                    <p>To confirm, type <b style='color:red'> DELETE </b> and click the delete button</p>
                    <input type="text" [(ngModel)]="delete" name="delete" class="form-control">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
                    <button id="delete-checklist-finalized" type="button" class="btn btn-danger"
                      (click)="deleteChecklistType(checklists.id)" (click)="c('Close click')">Delete</button>
                  </div>
                </ng-template>
                <!-- END Modal for deleting a new checklist type-->

                <!-- Modal for updating checklist type-->
                <form [formGroup]="checklistForm" class="form-horizontal" role="form"
                  style="padding-left:20px;padding-right:20px; padding-top:-20px;">
                  <ng-template #updateContent let-c="close" let-d="dismiss">
                    <div class="modal-header">
                      <h4 class="modal-title">Updatechecklist</h4>
                      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>Update checklist item</p>
                      <div class="form-group">
                        <div class="wrap">
                          <label for="inputVersion" class="col-sm-2 control-label">Checklist name</label>
                          <div class="col-sm-10">
                            <input required maxlength="120" formControlName="name" type="text" class="form-control"
                              id="inputVersion" />
                            <div class="wrap desc alert-info">
                              <div class="col-sm-10">The name of the checklist you are updating e.g: ASVS1, MASVS3
                              </div>
                            </div>
                          </div>
                          <label for="inputVersion" class="col-sm-2 control-label">Checklist description</label>
                          <div class="col-sm-10">
                            <textarea rows="10" formControlName="description" class="form-control"
                              id="inputVersion"></textarea>
                            <div class="wrap desc alert-info">
                              <div class="col-sm-10">What is this checklist all about?</div>
                            </div>
                          </div>
                          <label for="inputVersion" class="col-sm-2 control-label">Activate</label>
                          <div class="col-sm-10">
                            <select class="form-control" name="question" id="question" formControlName="visibility">
                              <option value=False>Not activated</option>
                              <option value=True>Active</option>
                            </select>
                            <div class="wrap desc alert-info">
                              <div class="col-sm-10">Activate the checklist</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
                      <button type="button" class="btn btn-warning" (click)="updateChecklistType(checklists.id)"
                        (click)="c('Close click')" id="update-checklist">Update</button>
                    </div>
                  </ng-template>
                </form>
                <!-- END Modal for updating checklist type-->
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Modal for adding a new checklist type-->
        <form [formGroup]="checklistForm" class="form-horizontal" role="form"
          style="padding-left:20px;padding-right:20px; padding-top:-20px;">
          <ng-template #content let-c="close" let-d="dismiss">
            <div class="modal-header">
              <h4 class="modal-title">Add new checklist</h4>
              <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Add the new checklist type to the list</p>
              <div class="form-group">
                <div class="wrap">
                  <label for="inputVersion" class="col-sm-2 control-label">Checklist name</label>
                  <div class="col-sm-10">
                    <input required maxlength="120" formControlName="name" type="text" class="form-control"
                      id="inputVersion">
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">The name of the new checklist you are adding e.g: ASVS1, MASVS3</div>
                    </div>
                  </div>
                  <label for="inputVersion" class="col-sm-2 control-label">Checklist description</label>
                  <div class="col-sm-10">
                    <textarea rows="10" formControlName="description" type="text" class="form-control-kb"
                      id="inputVersion"></textarea>
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">What is this checklist all about?</div>
                    </div>
                  </div>

                  <label for="inputVersion" class="col-sm-2 control-label">Activate</label>
                  <div class="col-sm-10">
                    <select class="form-control" name="question" id="question" formControlName="visibility">
                        <option selected>set active or not active</option>
                       <option value=0>Not activated</option>
                        <option value=1>Active</option>
                    </select>
                    <div class="wrap desc alert-info">
                      <div class="col-sm-10">Activate the checklist</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
              <button type="button" class="btn btn-success" (click)="newChecklistType()" (click)="c('Close click')"
                id="store-checklist">Submit</button>
            </div>
          </ng-template>
        </form>
        <!-- END Modal for adding a new checklist type-->


				<div *ngIf="!category_id" style="text-align:center;">
          <span class="icon"><i class="fa fa-search fa-5x"></i></span>
          <p></p>
          <h2>Select a category to start </h2>
        </div>

      </div>
      <!-- /col-lg-4 -->
    </div>
    <!-- /row -->
  </section>
  <!--/wrapper -->
</section>
<!-- /MAIN CONTENT -->